<template>
	<view>
		<dsl-navbar title="员工绩效明细" isBack bgTopImg="white"></dsl-navbar>
		<view class="serve_message text-white text-center animation-scale-up">
			<view class="padding-top">
				总服务费（元）
			</view>
			<view class="padding-top-sm">
				1515231.00
			</view>
			<view class="padding-top-xl">
				相比上月增长 19%
			</view>
		<!-- 	<view class="message_number text-sm ">
				总人数：12人
			</view> -->
		</view>
		<view class="margin-top-xl bg-white margin radius">
			<qiun-data-charts type="demotype" :opts="chatOpt" :chartData="chatData"/>
		</view>
		<view class="padding bg-white margin radius  animation-scale-up">
			<view class="rowsb padding-tb solid-bottom">
				<view>
					<view class="text-lg text-bold">人才库</view>
					<view class="text-sm text-gray">相比上月增长 19%</view>
				</view>
				<view class="align-center">
					<text class="text-red text-xl">1515312.00</text>
					<text class="cuIcon-right margin-left-sm"></text>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	import EChart from '@/components/qiun-data-charts/qiun-data-charts.vue'
	export default {
		data() {
			return {
				firmSalary: {},
				chatData: {},
				chatOpt: {
					xAxis:{boundaryGap:'justify'},
					 
					legend: {
						margin: '20',
						position: 'top',
						series: {
							legendShape: 'circle'
						}
					},
					
				}
			}
		},
		components: {
			EChart
		},
		onLoad() {

			this.getTabData()
			this.getData()
			this.chatData = {
				}
		},
		methods: {
			async  getData(){
				const result = await this.$ajax({
					url: this.$urls.firmSalary,
					noToast: true
				})
				
				if(result.code == 1){
					
					this.firmSalary = result.data
					
				}
				
			},
			async getTabData(){
				const result = await this.$ajax({
					url: this.$urls.lineChart,
					noToast: true
				})
				
				if(result.code == 1){
					
					this.chatData = result.data
					
				}
				
				console.log(result)
			},
		},
	}
</script>

<style>
	.serve_message {
		width: 686rpx;
		height: 301rpx;
		background: linear-gradient(343deg, #2294FF 0%, #47AEFF 100%);
		box-shadow: 0px 0px 20rpx rgba(51, 51, 51, 0.16);
		opacity: 1;
		border-radius: 25rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.message_number {
		width: 380rpx;
		height: 50rpx;
		background: #0074E1;
		opacity: 1;
		line-height: 50rpx;
		text-align: center;
		border-radius: 99rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}
	page{
background: #F7F6FA;
	}
</style>
